
/*
 <input type="text" ng-model="abc" cleanable-input x="-3" y="-5"/>
 */

angular.module('web')
  .directive('cleanableInput', ['$timeout', function($timeout) {

    return {
      restrict: 'EA',
      require: 'ngModel',

      scope: {
        model: '=ngModel',
        ngChange: '&',
        x: '=',
        y: '='
      },
      link: function link(scope, element) {

        var id = 'cleanable_inp-'+((Math.random()+'').substring(2));

        element.wrap('<div id="'+id+'" style="position:relative;width:100%;"></div>');
        var btn = $('<a href="" style="font-size:14px;color:#999">' +
          '<i class="glyphicon glyphicon-remove-circle"></i></a>').appendTo($('#'+id));

        btn.css({
          display:'none',
          position:'absolute',
          'z-index': 10
        }).click(function(e){

          scope.model = '';
          if(!scope.$root.$$phase){
            scope.$apply();
          }

          if(scope.ngChange){
            scope.$eval(scope.ngChange);
          }

          return false;
        });

        var y = isNaN(scope.y)?0:parseInt(scope.y);
        var x = isNaN(scope.x)?0:parseInt(scope.x);


        function onchange(v){
          if(v && v !== ''){

            btn.css({
              'top': 6 + y,
              'right': 6 - x
            }).show();

          }else{
            btn.hide();
          }
        }


        // Listen for any changes to the original model.
        var tid;
        scope.$watch('model', function alteredValues(newValue, oldValue) {
          $timeout.cancel(tid);
          tid=$timeout(function(){
            onchange(newValue);
          },300);
        }, true);

      }

    };

  }]);
